<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="referrer" content="no-referrer" />
    <title>地图基础功能</title>
    <style>
        body {
            position: absolute;
            margin: 0;
            width: 100%;
            height: 100%;
        }

        #mapContainer {
            left: 0px;
            top: 0px;
            width: 100%;
            height: 100%;
            float: left;
        }
    </style>
</head>

<body>
    <div id="mapContainer" style="position: relative;"></div>
</body>
<script src='/GiswayEngine.js'></script>
<script src='/examples//bussinessLogic/ParseLayer.js'></script>
<script type="text/javascript">

    window.app = new GE.App('mapContainer', {
        // position: [120.025986, 30.248976, 9410], //相机的位置
        // lookAt: [120.025986, 30.248976, 0], //相机看向的地图位置
        position: [121.97978, 40.75601, 15000],
        lookAt: [121.97978, 40.75601, 0],
        cameraScrollSpeed: 15, //鼠标滚动时，控制相机上下移动的速度
        // minZoom: 12, //允许地图的最小层级
        minZoom: 3, //允许地图的最小层级
        maxZoom: 21, //允许地图的最大层级
        ambientLightIntensity: 1,
        useDefaultTexture: false, //是否使用瓦片默认纹理
        useCarpet: true, //开启地图的地毯功能
        background: "Fog", //背景的类型，参数有如下类型：None, Fog, Color, Gradient, Image, Sky, Image。使用Fog地图的性能会比较好
        // backGroundColorA:'#AAAAFF', //当background的值为Gradient时，需要配置该参数。最下端颜色，默认值为#0000FF
        // backGroundColorB:'#0000FF', //当background的值为Gradient时，需要配置该参数。最上端颜色，默认值为#FF0000
        // backGroundColor: '#F5F5F5', //当background的值为Color时，需要配置该参数，默认值为#00BFFF
        // imageUrl: 'http://localhost:9000/examples/assets/img_logo.39362dc1.png', //当background的值为Image时，需要配置该参数。默认值为null
        maxSlopeAngle: 60, //地图最大倾斜角度
        extraStep: 4, //额外加载瓦片的步长
        // verticalLevel: 15, //地图层级小于等于该层级开时，相机开始垂直正对着地图
        tileDefaultColor: '#C0C0C0', //瓦片默认颜色
        baseLayer: [
            //带自定义基准点和bundle压缩的影像底图
            {
                configUrl: 'http://36.212.170.187:9000/songsandata2/Conf.xml',
                url: 'http://36.212.170.187:9000/songsandata2/_alllayers/{z}/{y}/{x}.png',
                colorSpace: 'srgb', //该图层的纹理使用的颜色空间，默认是''，还有其他参数：'srgb', 'linear', 
                urlDecimal: false, //影像底图url中的瓦片行列号是否是十进制，true表示十进制，false表示十六进制
                tileType: 'image', //影像底图
                mapHeight: 0, //地图的高度, 默认是0
                canNotSelect: true, //true表示该图层不参与射线拾取，false表示图层参与射线拾取
                maxDataLevel: 21, //该图层的最大数据层级，如果不设置默认是18
                isAdditionalLayer: true, //是否是附加图层
            }
        ]
    });

    // app.options.Map.maxSlopeAngle = 0; //在运行中动态调整地图的最大倾斜角度


    window.app.on('Click', function (e) {
        console.log(e);
    });

    let prefixUrl = 'http://36.212.170.187:9000/tongyongdianwei/';
    let pathArray = [
        prefixUrl + '高空瞭望.json',
        prefixUrl + '供水管线.json',
        prefixUrl + '企业点位.json',
        prefixUrl + '企业主要出入口.json',
        prefixUrl + '燃气管线.json',
        prefixUrl + '污水管线.json',
        prefixUrl + '雨水管线.json',
        prefixUrl + '蒸汽管线.json',
    ];

    pathArray.forEach(element => {
        parse(element);
    });

    function parse(dataUrl) {
        let self = this;
        // 使用fetch函数发送GET请求
        fetch(dataUrl)
            .then(response => {
                // 检查响应的状态码是否表示成功
                if (!response.ok) {
                    throw new Error(`HTTP error! status: ${response.status}`);
                }
                // 解析JSON格式的响应体
                return response.json();
            })
            .then(jsonData => {
                let type = self.recognizeType(jsonData);
                if (type == 'point') { //点数据
                    parsePoint(dataUrl, jsonData, pointCallback);//pointCallback参数是可选的，该参数在所有Marker创建完毕后调用。
                }
                else if (type == 'radiation') { //辐射范围的数据。 原始数据中type值为point，为了方便程序识别，我手动修改了数据
                    //业务端可以根据需要设置辐射的颜色和半径
                    let radiationColor = '#1E90FF';
                    let radiationRadius = 500;
                    if (dataUrl.indexOf('高空瞭望') != -1) { //不同的图层用什么颜色和宽度，业务端可以自己设置。这里只是一个例子
                        radiationRadius = 1000;
                        radiationColor = '#00FF00';
                    }
                    parseRadiation(dataUrl, jsonData, radiationColor, radiationRadius, modelCallback); //modelCallback参数是可选的，该参数在所有辐射模型创建完毕后调用。
                }
                else if (type == 'polygon') { //封闭的多边形
                    let lineWidth = 5;
                    let lineColor = '#00FA9A';
                    if (dataUrl.indexOf('企业点位') != -1) { //不同的图层用什么颜色和宽度，业务端可以自己设置。这里只是一个例子
                        lineWidth = 1;
                        lineColor = '#0000FF';
                    }
                    parsePolygon(dataUrl, jsonData, lineWidth, lineColor, modelCallback); //modelCallback参数是可选的，该参数在所有辐射模型创建完毕后调用。
                }
                else if (type == 'multiLine') { //线组合数据
                    let lineWidth = 5;
                    let lineColor = '#00FA9A';
                    if (dataUrl.indexOf('供水管线') != -1) { //不同的图层用什么颜色和宽度，业务端可以自己设置。这里只是一个例子
                        lineWidth = 2;
                        lineColor = '#FF00FF';
                    }
                    parseMultiLine(dataUrl, jsonData, lineWidth, lineColor);
                }
                else if (type == 'line') { //线数据
                    //业务端可以根据需要设置线的宽度和颜色
                    let lineWidth = 5;
                    let lineColor = '#00FA9A';
                    parsePolyline(dataUrl, jsonData, lineWidth, lineColor);
                }
            })
            .catch(error => {
                // 处理任何在请求过程中发生的错误
                console.log('请求失败:', error);
            });
    }

    function pointCallback(markerArray) {
        markerArray.forEach(marker => {
            marker.element.addEventListener('click', function (event) {
                console.log(marker['poiMsg']);
            }, false);
        });
    }

    function modelCallback(dataArray) {
        dataArray.forEach(data => {
            let marker = data.marker;
            marker.element.addEventListener('click', function (event) {
                console.log(data.marker['poiMsg']);
            })
        })
    }
</script>

</html>